<template>
  <div id="home">
    <div v-if="is_show_stores">
      <div class="check_num">
      <span style="font-size:15px; background-color:#f05959; color:#FFF;padding:3px 8px;float:right;margin-right:-15px" @click="is_show_stores = false">X</span>
        <div class="margin" v-for="item in stores" :key="item.id">
          <button @click="setStor(item)">{{item.storname}}</button>
        </div>
      </div>
      <div class="mask">

      </div>
    </div>
    <div class="form">
      <p class="title">仓储管理系统登录</p>
      <div class="user">
        <img src="./../../static/img/ren.png">
        <input type="text" name="username" class="ur" placeholder="请输入用户名" v-model="userName" :value="userName" v-on:focus="empty()">
        <i class="clickEvent" v-on:click="deleteUser()"></i>
      </div>
      <div class="password">
        <img src="./../../static/img/suo.png">
        <input name="password" ref="passInput" :value="password" type='password' class="pw" placeholder="请输入密码" id="pw" v-model="password" v-on:focus="empty()">
        <i class="clickEvent" v-on:click="change()"></i>
      </div>
      <div class="logon" v-on:click="login()">
        登陆
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      empty: "",
      isPassword: false,
      userName: "",
      password: "",
      passwordType: "text",
      msg: "",
      is_show_stores: false,
      stores: [],
      token: ""
    };
  },
  methods: {
    change: function() {
      this.isPassword = !this.isPassword;
      if (this.isPassword) {
        this.$refs.passInput.setAttribute("type", "text");
        this.$refs.passInput.style.backgroundImage =
          "url(" + require("./../../static/img/7.png") + ")";
      } else {
        this.$refs.passInput.setAttribute("type", "password");
        this.$refs.passInput.style.backgroundImage =
          "url(" + require("./../../static/img/8.png") + ")";
      }
    },

    deleteUser: function() {
      this.userName = "";
    },
    login: function() {
      if (!this.userName) {
        this.$toast("请输入用户名", 2000);
        return;
      }
      if (!this.password) {
        this.$toast("请输入密码", 2000);
        return;
      }
      localStorage.setItem("userName", this.userName);
      localStorage.setItem("password", this.password);
      this.$http
        .post("api/motor/login", {
          username: this.userName,
          password: this.password
        })
        .then(
          res => {
            if (res.data.rtcode == 2) {
              this.$toast("用户名或密码不对", 2000);
              return;
            }
            if (res.data.stores.length == 0) {
              this.$layer.alert("没有分配仓库权限");
              return;
            }
            this.token = res.data.token;
            if (res.data.stores.length > 1) {
              this.stores = res.data.stores;
              this.is_show_stores = true;
              return;
            } else {
              localStorage.setItem("storcode", res.data.stores[0].storcode);
              localStorage.setItem("storname", res.data.stores[0].storname);
            }
            // 缓存userId
            localStorage.setItem("token", res.data.token);
            this.$router.push({ path: "/Nav" });
          },
          err => {
            this.$layer.alert(JSON.stringify(err));
          }
        );
    },
    setStor: function(res) {
      localStorage.setItem("storcode", res.storcode);
      localStorage.setItem("storname", res.storname);

      localStorage.setItem("token", this.token);
      this.$router.push({ path: "/Nav" });
    }
  },
  created: function() {
    this.userName = localStorage.getItem("userName");
    this.password = localStorage.getItem("password");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.margin {
  margin: 2rem 0;
}

.mask {
  z-index: 4;
  left: 0;
  position: fixed;
  top: 0;
  opacity: 0.4;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.check_num {
  width: 80%;
  background-color: #fff;
  position: fixed;
  z-index: 8;
  margin-left: 10%;
  margin-top: 20%;
  padding: 0 6% 3% 11%;
  border-radius: 0.5rem;
  max-height: 35rem;
  overflow-x: scroll;
}

.check_num button {
  font-size: 15px;
  background: #668292;
  width: 90%;
  height: 3.4rem;
  border-radius: 6px;
  color: #fff;
}

#home {
  height: 100%;
  background-image: url("./../../static/img/登陆页面图.png");
  background-attachment: fixed;
  background-position: top center;
  background-size: cover;
}

.form {
  width: 65%;
  height: 50%;
  position: absolute;
  top: 25%;
  right: 16%;
}

.title {
  text-align: center;
  font-size: 2rem;
  color: #fff;
}

.user img {
  vertical-align: middle;
  width: 2rem;
  margin-bottom: 0.5rem;
}

.user {
  position: relative;
  margin-top: 3rem;
  border-bottom: 1px solid #fff;
}

.user input {
  border: none;
  font-size: 1.3rem;
}

.password img {
  vertical-align: middle;
  width: 2rem;
  margin-bottom: 0.5rem;
}

.password {
  position: relative;
  margin-top: 3rem;
  border-bottom: 1px solid #fff;
}

.password input {
  border: none;
  font-size: 1.3rem;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #fff;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #fff;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #fff;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #fff;
}

.logon {
  color: #fff;
  font-size: 1.8rem;
  width: 90%;
  height: 3rem;
  line-height: 3rem;
  border-radius: 15px;
  background: rgba(2, 2, 2, 0.6);

  text-align: center;
  margin-top: 3rem;
  margin-left: 5%;
}

i.clickEvent {
  display: -webkit-box;

  width: 3rem;
  height: 3rem;
  position: absolute;
  top: -22%;
  right: 10%;
}

.ur {
  background: url("./../../static/img/qc.png") no-repeat;
  background-position: 95% center;
  box-sizing: border-box;
  padding-left: 0.5rem;
  background-size: 1.5rem;
}

.pw {
  background: url("./../../static/img/7.png") no-repeat;
  background-position: 95% center;
  box-sizing: border-box;
  padding-left: 0.5rem;
  background-size: 1.5rem;
}

input {
  color: #fff;
  width: 79%;
}

input::-webkit-input-placeholder {
  color: #fff;
}
</style>
